<script lang="ts" setup>
//404页
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
//输入框中的内容
const keywords = ref("");
</script>

<template>
  <section class="main">
    <h1 class="section-headline">很抱歉，你要查找的网页找不到。</h1>
    <aside id="search-wrapper">
      <form :action="`/search/${keywords}`">
        <el-input v-model="keywords" placeholder="搜索本站内容" size="large">
          <template #prefix>
            <el-icon><search /></el-icon>
          </template>
        </el-input>
      </form>
    </aside>
  </section>
</template>

<style lang="less" scoped>
.main {
  margin-top: 92px;
  margin-bottom: 140px;
  margin-left: auto;
  margin-right: auto;
  width: 980px;
  text-align: center;
}
.section-headline {
  width: 512px;
  margin-right: auto;
  margin-bottom: 54px;
  margin-left: auto;
}
#search-wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 490px;
  margin-bottom: 10px;
}

@media only screen and (max-width: 1068px) {
  .main {
    margin-top: 90px;
    margin-bottom: 120px;
  }
  .main {
    margin-left: auto;
    margin-right: auto;
    width: 692px;
  }
  .section-headline {
    width: 420px;
    margin-bottom: 45px;
  }
}
@media only screen and (max-width: 735px) {
  .main {
    margin-top: 45px;
    margin-bottom: 60px;
  }
  .main {
    margin-left: auto;
    margin-right: auto;
    width: 87.5%;
  }
  .section-headline {
    max-width: 330px;
    width: auto;
    margin-bottom: 35px;
  }
  #search-wrapper {
    width: auto;
  }
}
</style>
